<template>
    <div class="goods-info" v-if="Object.keys(goodsInfo).length>0">
        <div class="goods-info-title">{{goodsInfo.title}}</div>
        <div class="priceInfo">
            <span>{{goodsInfo.price}}</span>
            <span v-show="goodsInfo.oldPrice">{{goodsInfo.oldPrice}}</span>
            <span v-show="goodsInfo.discountDesc">{{goodsInfo.discountDesc}}</span>
        </div>
        <div class="columns">
            <span v-for="(item,key) in goodsInfo.columns" :key="key">{{item}}</span>
        </div>
        <div class="services">
            <span 
            v-for="(index,key) in goodsInfo.services.length-1<3?goodsInfo.services.length-1:3" 
            :key="key">
                <img :src="goodsInfo.services[index].icon" alt="">
                <span>{{goodsInfo.services[index].name}}</span>
            </span>
        </div>
    </div>
</template>

<script>
    export default {
        props:{
            goodsInfo:{
                type:Object,
                default(){
                    return {}
                }
            }
        }
    }
</script>

<style scoped>
    .goods-info{
        margin:15px 0;
        padding:0 10px;
        border-bottom: 4px solid rgba(100, 100, 100, .1);
    }
    .goods-info-title{
        color: #333;
        font-size: 18px;
        padding-bottom: 10px;
    }
    .priceInfo{
        margin-bottom: .9rem;
    }
    .priceInfo>span{
        padding-right: 8px;
    }
    .priceInfo :first-child{
        color: var(--color-high-text);
        font-size: 1.3rem;
    }
    .priceInfo :nth-child(2){
        text-decoration:line-through;
        font-size: .8rem;
        color: var(--color-text);
    }
    .priceInfo :last-child{
        display: inline-block;
        font-size: .8rem;
        color: #fff;
        padding: 3px 7px;
        background: var(--color-tint);
        margin-bottom: 5px;
        vertical-align:bottom;
        border-radius: 1rem;
    }
    .columns{
        border-bottom: 1px solid rgba(100, 100, 100, .1);
    }
    .columns,.services{
        padding:.3rem 0;
        display: flex;
        justify-content:space-between;
    }
    .columns span{
        font-size: .8rem;
        color: #aaa;
    }
    .services img{
        width: .8rem;
        height: .8rem;
        margin-right: 3px;
        /* padding-top: 4px */
    }
    .services{
        margin: 1rem 0;
        font-size: 0.9rem;
        color: var(--color-text);
    }
</style>